<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>mdv</title>
    <style type="text/css">
        body > #app > .loading {
            width: 150px;
            height: 15px;
            margin: 0 auto;
            position: relative;
            margin-top:100px;
        }
        body > #app > .loading span {
            position: absolute;
            width: 15px;
            height: 100%;
            border-radius: 50%;
            background: lightgreen;
            -webkit-animation: load 1.04s ease-in infinite alternate;
        }
        @-webkit-keyframes load {
            0% {
                opacity: 1;
                -webkit-transform: translate(0px);
            }
            100% {
                opacity: 0.2;
                -webkit-transform: translate(150px);
            }
        }
        body > #app > .loading span:nth-child(1) {
            -webkit-animation-delay:0.13s;
        }
        body > #app > .loading span:nth-child(2) {
            -webkit-animation-delay:0.26s;
        }
        body > #app > .loading span:nth-child(3) {
            -webkit-animation-delay:0.39s;
        }
        body > #app > .loading span:nth-child(4) {
            -webkit-animation-delay:0.52s;
        }
        body > #app > .loading span:nth-child(5) {
            -webkit-animation-delay:0.65s;
        }
    </style>
  </head>
  <body>
    <div id="app">
        <div class="loading">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <center>加载中...</center>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
